<template>
  <div>
    <FixedOperation>
      <div class="flex items-center justify-between">
        <div class="leading-30px">
          <div class="inline-block">
            <svg-icon
              :icon-class="'svg_salesorder'"
              class="w-30px h-30px align-middle"
            />
            <span
              class="text-#000 leading-30px ml-10px text-16px font-bold align-bottom"
              >会员套餐设置</span
            >
          </div>
        </div>

        <div>
          <el-select
            class="w-full"
            v-model="queryParams.vipType"
            placeholder="会员类型"
            @change="init"
          >
            <el-option
              v-for="item in vip_group_tpye"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="text-right">
          <slot></slot>
          <!-- <el-button type="primary" plain>新增分类</el-button> -->
          <el-button
            type="primary"
            plain
            @click="addEquityFun({ type: '分类' })"
            >新增分类</el-button
          >
          <el-button type="primary" plain @click="handleReturn">返回</el-button>
        </div>
      </div>
    </FixedOperation>
    <div class="app-container inden-manage">
      <el-table
        v-loading="loading"
        :data="tableList"
        stripe
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        default-expand-all
      >
        <el-table-column prop="name" label="权益名称" fixed="left">
          <template #default="scope">
            <span> {{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="250" align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="right"
          width="150"
          fixed="right"
          class-name="small-padding"
        >
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="新增"
              placement="top-start"
              v-if="!scope.row.parentId"
            >
              <el-link
                class="pl-2"
                icon="Plus"
                :underline="false"
                @click="addEquityFun({ type: '权益', data: scope.row })"
              ></el-link
            ></el-tooltip>

            <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="top-start"
              ><el-link
                class="pl-2"
                icon="Edit"
                :underline="false"
                @click="
                  editEquityFun({
                    type: scope.row.parentId ? '权益' : '分类',
                    data: scope.row
                  })
                "
              ></el-link
            ></el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="top-start"
              ><el-link
                class="pl-2"
                :underline="false"
                icon="Delete"
                @click="handleDel(scope.row)"
              ></el-link
            ></el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="下移"
              placement="top-start"
              ><el-link
                class="pl-2"
                :underline="false"
                icon="Bottom"
                @click="handleDown(scope.row)"
              ></el-link
            ></el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增分类 -->
    <el-dialog
      :title="equityBox.title"
      v-model="equityBox.open"
      :width="equityBox.width"
      append-to-body
      @close="cancel"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="140px"
      >
        <el-row>
          <el-col :span="24" v-if="formType == '权益'">
            <el-form-item label="会员权益分类" prop="parentId">
              <el-select
                class="w-full"
                v-model="formData.parentId"
                placeholder="请选择会员权益分类"
              >
                <el-option
                  v-for="item in classOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="权益分类名称" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入权益分类名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formType == '权益'">
            <el-form-item label="添加方式" prop="addMethod">
              <el-radio-group v-model="formData.addMethod">
                <el-radio
                  v-for="item in equity_add_method"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="会员类型"
              v-if="formType !== '权益'"
              prop="vipType"
            >
              <el-select
                class="w-full"
                v-model="formData.vipType"
                placeholder="会员类型"
              >
                <el-option
                  v-for="item in vip_group_tpye"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="sort">
              <el-input-number
                class="w-full"
                :step="1"
                step-strictly
                v-model="formData.sort"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24"
            ><!-- v-if="formType == '权益'" -->
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                type="textarea"
                rows="4"
                maxlength="100"
                show-word-limit
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="contentTable">
import { reactive, toRefs, ref, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import {
  listEquity,
  downEquity,
  setEquity,
  delEquity
} from '@/api/rightsManage/index'
import { isMoneyNot, isMoneyNegative, validateLen } from '@/utils/validate'
const router = useRouter()
const { proxy } = getCurrentInstance()

const userOption = ref({ transactionId: [] })
const { equity_add_method, vip_group_tpye } = proxy.useDict(
  'equity_add_method',
  'vip_group_tpye'
)
const data = reactive({
  queryParams: { vipType: '1' },
  formType: '分类',
  classOption: [],
  loading: false,
  tableList: [
    {
      name: '111',
      name1: '2222',
      name2: '333',
      status: '1111',
      isInput: true,
      $cellEdit: false
    },
    {
      name: 'true',
      name1: 'true',
      name2: 'false',
      status: '2222',
      isInput: false,
      $cellEdit: true
    },
    {
      name: '3333',
      name1: '232',
      name2: '333',
      status: '333',
      isInput: true,
      $cellEdit: true
    }
  ],
  equityBox: {
    title: '新增会员',
    open: false
  },
  formRules: {
    name: [
      {
        required: true,
        message: '请输入会员名称',
        trigger: 'blur'
      }
    ],
    parentId: [
      {
        required: true,
        message: '请选择会员权益分类',
        trigger: 'change'
      }
    ],
    addMethod: [
      {
        required: true,
        message: '请选择添加方式',
        trigger: 'change'
      }
    ],
    vipType: [
      {
        required: true,
        message: '请选择会员类型',
        trigger: 'change'
      }
    ]
  },
  formData: {
    addMethod: '2'
  }
})
const {
  queryParams,
  formType,
  classOption,
  loading,
  tableList,
  equityBox,
  formRules,
  formData
} = toRefs(data)

// 初始化
async function init() {
  // 归属部门
  getList()
}

// 获取数据列表
function getList() {
  listEquity(queryParams.value).then(res => {
    tableList.value = res.data
    classOption.value = res.data
    // console.log('权益内容列表res===>', res)
  })
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
/** 表单重置 */
function reset() {
  formData.value = {
    addMethod: '2'
  }
  proxy.resetForm('formRef')
}
function cancel() {
  reset()
  equityBox.value.open = false
}
function addEquityFun(param) {
  formType.value = param?.type
  if (formType.value == '分类') {
    equityBox.value.title = '新增分类'
    formData.value.addMethod = undefined
  } else {
    equityBox.value.title = '新增权益'
    formData.value.parentId = param?.data.id
    formData.value.vipType = param?.data.vipType
  }
  equityBox.value.open = true
}

function editEquityFun(param) {
  formType.value = param?.type
  formData.value = JSON.parse(JSON.stringify(param?.data))
  if (formType.value == '分类') {
    equityBox.value.title = '编辑分类'
    formData.value.addMethod = null
  } else {
    equityBox.value.title = '编辑权益'
  }
  equityBox.value.open = true
}

// 删除会员
function handleDel(row) {
  let rowIds = row.id
  proxy.$modal
    .confirm('是否确认删除"' + row.name + '?')
    .then(function () {
      return delEquity(rowIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}
// 下移分类
function handleDown(data) {
  downEquity(data).then(e => {
    getList()
    proxy.$modal.msgSuccess('下移成功')
  })
}
function submitForm() {
  proxy.$refs.formRef.validate((valid, msg) => {
    if (valid) {
      setEquity(formData.value).then(res => {
        console.log('新增会员==》', res)
        proxy.$modal.msgSuccess('保存成功')
        cancel()
        getList()
      })
    }
  })
}

// 返回、关闭页面
function handleReturn() {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
  // router.push({ path: url, query: data })
  //   proxy.$refs.form.clearValidate()
}
init()
</script>
<style scoped>
.search-drawer-retract {
  color: #999999;
}
</style>
